<template>
	<view class="stepRow">
		<view class="statueText"  style="color: #DD524D;" v-if="isStatus==2">
			<view class="text">已拒绝</view>
		</view>
		<view class="statueText" style="color: #037CE3; border-color: #037CE3;" v-if="isStatus==0">
			<view class="text">审核中</view>
		</view>
		<view class="statueText" style="color: #037CE3; border-color: #037CE3;" v-if="isStatus==1">
			<view class="text">已通过</view>
		</view>
		<image
			class="stepIcon"
			src="../../static/images/jindu1.png"
			v-if="!planeStatus"
			@click="handleChekcPlan"
			mode=""
		></image>
		<image
			class="stepIcon"
			src="../../static/images/jindu2.png"
			v-if="planeStatus"
			@click="handleChekcPlan"
			mode=""
		></image>
		<view class="finnaceStep" v-if="planeStatus">
			<view class="MyStep" v-for="(item, index) in stepList">
				<view class="stepLine" v-if="!(index == stepList.length - 1)"></view>
				<view class="stepRow1">
					<image class="stepIdot" src="../../static/images/icon_jd1@2x.png" mode=""></image>
					<view style="width:100%; display: flex ; justify-content: space-between;">
						<view class="stepdate">{{item.member_add_time}}</view>
						<view class="stepdate">{{item.member_nickname}}</view>
					</view>
				</view>
				<view class="stepRow2">
					<text
						class="stepusername"
						style="margin-right: 10rpx;"
					>{{item.approve_nickname}}</text>
					<text
						class="stepusertime"
						v-if="item.approve_add_time!=0"
					>{{item.approve_add_time}}</text>
					<text style="color:#19af3c;font-size: 24rpx;" v-if="item.status == '0'">
						待审批
					</text>
					<text style="color:rgb(14, 163, 232);" v-if="item.status == '1'">
						通过
					</text>
					<text style="color:rgb(245, 95, 95);" v-if="item.status == '2'">
						驳回
					</text>
				</view>
				<view v-if="item.reason" style="height: inherit;" class="stepRow2">
					<text
						class="stepuserRemark"
					>{{'拒绝理由:'+item.reason}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'project-button',
	data() {
		return {
			planeStatus: false,
			stepList: [],
			isStatus:'',
		};
	},
	props: ['approvalLog','statusDetails'],
	created() {
		this.token = uni.getStorageSync('btlh_process_token') || '';
		this.member_id = uni.getStorageSync('btlh_process_member_id') || '';
		// console.log('文件上传组件的merid',this.member_id)
		this.company_id = uni.getStorageSync('bthl_process_LoginCompanyId') || '';
	},
	methods: {
		// 点击查看进度
		handleChekcPlan() {
			this.planeStatus = !this.planeStatus;
		}
	},
	mounted() {
		console.log('进度组件-mounted', this.approvalLog);
		if (this.approvalLog) {
			this.stepList = this.approvalLog;
		}
	},
	watch: {
		approvalLog(val, oldVal) {
			if (val) {
				this.stepList = val;
				console.log('进度组件-watch', this.stepList);
			}
		},
		statusDetails(val, oldVal) {
			if (val) {
				this.isStatus = val;
				console.log('进度组件-watch', this.stepList);
			}
		},
		
	}
};
</script>

<style scoped lang="scss">
.stepRow {
	position: relative;
	display: flex;
	width: 100vw;
	justify-content: flex-end;
	.statueText{
		position: absolute;
		// font-size: 24rpx;
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		border: 1px dashed #DD524D;
		left: 50rpx;
		.text{
			width: 150rpx;
			position: absolute;
			top: 20rpx;
			left: -4rpx;
			font-size: 38rpx;
			transform: rotate(-45deg);
		}
	}
	.stepIcon {
		width: 180rpx;
		height: 60rpx;
		margin-bottom: 10rpx;
		margin-right: 30rpx;
	}

	.finnaceStep {
		position: absolute;
		top: 70rpx;
		right: 30rpx;
		width: 630rpx;
		background: #ffffff;
		z-index: 99;
		box-shadow: 2px 3px 8px 0px rgba(0, 0, 0, 0.2);
		box-sizing: border-box;
		padding: 48rpx 30rpx;
		border-radius: 20px;

		.MyStep {
			position: relative;

			.stepLine {
				position: absolute;
				width: 2px;
				height: 122rpx;
				left: 12rpx;
				top: 22rpx;
				background-color: #40a0f2;
			}

			.stepRow1 {
				display: flex;
				align-items: center;

				.stepIdot {
					width: 26rpx;
					height: 26rpx;
					margin-right: 20rpx;
				}

				.stepdate {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #128bf1;
				}
			}

			.stepRow2 {
				height: 84rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.stepusername {
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
					width: 130rpx;
					overflow: hidden;
					white-space: nowrap;
					text-overflow:ellipsis;
				}
				.stepuserRemark {
					margin-left: 70rpx;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
				}
				.stepusertime {
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
					width: 280rpx;
					overflow: hidden;
					white-space: nowrap;
					text-overflow:ellipsis;
					
				}
				.stepusername:nth-child(1){
					margin-left: 70rpx;
				}

				.stepstatus {
					margin: 20rpx;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #19af3c;
				}
				
			}
		}
	}
}
</style>
